<template>
  <div class="replace-charge">
    <div class="charge-main-content">
      <h1 class="inviter">{{userName}}</h1>
      <p class="speak-to-you">向你发起了代充邀请</p>
      <div class="please-you">
        <img src="../assets/picture/replace-bg.png" width="100%">
        <!--<div class="say"><p>请好心人赏口饭吃吧</p></div>-->
        <img class="inviter-img" :src="userPic" width="70" height="70">
      </div>
      <ul class="charge-list">
        <li v-for="(charge, index) of charges" :key="index" @click="changeActiveCharge(index)">
          <img :src="activeCharge === index ? selectedCharge : notSelectedCharge" width="100%">
          <p class="game-gold">{{charge.remark}}</p>
          <p class="money-gold">{{charge.money}}</p>
        </li>
      </ul>
      <p class="little-tips">＊ 本次充值用于为对方“喵抓娃娃”账户增加金额</p>
      <p class="little-tips">＊ 充值前，请与对方确认信息，谨防诈骗</p>
      <div class="operate-charge">
        <a class="reject">坚决拒绝</a>
        <a class="accept" @click="chargeGold(rechargeId)">义不容辞</a>
      </div>
    </div>
    <div class="down-wrap">
      <div class="download-tips-content">
        <img src="../assets/picture/download-bg.png" width="100%">
        <div class="download-btn">
          <a class="download-link">立即下载体验</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import selectedCharge from '../assets/picture/btn_sel.png'
  import notSelectedCharge from '../assets/picture/btn_not.png'
  export default {
    name: 'chargerReplace',
    data () {
      return {
        selectedCharge: selectedCharge,
        notSelectedCharge: notSelectedCharge,
        activeCharge: 0,
        charges: [
//          {remark: '一个鱼骨头', money: '￥10'},
//          {remark: '一个鱼骨头', money: '￥10'},
//          {remark: '一个鱼骨头', money: '￥10'},
//          {remark: '一个鱼骨头', money: '￥10'}
        ],
        userId: '',
        userPic: '',
        userName: '',
        rechargeId: '',
        token: ''
      }
    },
    beforeMount () {
      this.userId = this.$utils.getQueryStringByName('userId')
      this.rechargeId = this.$utils.getQueryStringByName('payConfigId')
      this.token = this.$utils.getQueryStringByName('token')
    },
    mounted () {
      this.chargeLogin()
      this.rechargeMiaoBi()
    },
    methods: {
      chargeLogin () {
        if (this.token) {
          this.$utils.setCookie('WAWA_TOKEN', this.token)
        } else {
          top.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?' +
            'appid=wx890410ff186d98b7' +
            '&redirect_uri=https%3A%2F%2Fwww.likewawa.com%2Fmiaozhuapc%2Fv1%2Flogin%2Fh5login' +
            '&response_type=code' +
            '&scope=snsapi_userinfo' +
            '&state=replace-charge?userId=' + this.userId
        }
      },
      // http://www.juletrip.com:8080
      rechargeMiaoBi () {
        this.$http({
          method: 'post',
          url: 'http://www.juletrip.com:8080/miaozhua/v1/outlin/geth5SharePay',
          body: {'userId': this.userId},
          emulateJSON: true
        }).then(function (response) {
          console.log(response)
          response = JSON.parse(response.bodyText)
          this.userPic = response.pay.wxPic
          this.userName = response.pay.wxNickName
          this.charges = response.pay.payConfig
          for (var i = 0; i < response.pay.payConfig.length; i++) {
            if (response.pay.payConfig[i].payConfigId === parseInt(this.$utils.getQueryStringByName('payConfigId'))) {
              this.activeCharge = i
              return true
            }
          }
        }, function () {
          console.log('稍后重试')
        })
      },
      changeActiveCharge (index) {
        this.activeCharge = index
        this.rechargeId = this.charges[index].payConfigId
      },
      chargeGold (rechargeID) {
        // rechargeID 充值id
        // alert(rechargeID)
        var that = this
        this.$axios.get('https://www.likewawa.com/miaozhuapc/v1/wx/s1/wxpay?payConfigId=' + rechargeID + '&channel=JSAPI&userId=' + this.userId,
          {headers: {'WAWA_TOKEN': this.$utils.getCookie('WAWA_TOKEN')}}
          // {params: {'payConfigId': rechargeID, 'channel': 'JSAPI'}}
        ).then(function (response) {
          response = response.data.body
          var resAppId = response.appId
          var resTimeStamp = response.timeStamp
          var resNonceStr = response.nonceStr
          var resPackage = response.package
          var resSignType = response.signType
          var resPaySign = response.paySign
          if (typeof WeixinJSBridge === 'undefined') {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign, false)
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady, resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign)
              document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady, resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign)
            }
          } else {
            that.onBridgeReady(resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign)
          }
        })
          .catch(function (error) {
            console.log(error)
          })
      },
      onBridgeReady (resAppId, resTimeStamp, resNonceStr, resPackage, resSignType, resPaySign) {
//        alert(appId + ',' + timeStamp + ',' + nonceStr + ','  + prepayId + ',' + paySign)
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            'appId': resAppId,             // 公众号名称，由商户传入
            'timeStamp': resTimeStamp,     // 时间戳，自1970年以来的秒数
            'nonceStr': resNonceStr,       // 随机串
            'package': resPackage,
            'signType': resSignType,       // 微信签名方式
            'paySign': resPaySign          // 微信签名
          },
          function (res) {
//            alert(res)
            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              location.reload()
              console.log('充值成功')
            } else {
              console.log('充值失败')
            }
          }
        )
      }
    }
  }
</script>

<style lang="scss" scope>
  .replace-charge{
    margin: 0 15px;
    font-family: PingFangSC-Regular;
    .charge-main-content{
      margin-top: 27px;
      h1.inviter{
        text-align: center;
        font-size: 17px;
        color: #1e1e1b;
      }
      p.speak-to-you{
        font-size: 12px;
        color: #1e1e1b;
        text-align: center;
        margin-top: 8px;
      }
      .please-you{
        position: relative;
        margin-top: 50px;
        .say{
          position: absolute;
          top: 60px;
          font-size: 12px;
          color: #1e1e1b;
          p{
            text-align: center;
          }
        }
        img.inviter-img{
          position: absolute;
          left: 50%;
          margin-left: -35px;
          top: -35px;
          border-radius: 50%;
        }
      }
      ul.charge-list{
        font-size: 0;
        margin-top: 15px;
        li{
          display: inline-block;
          width: calc(50% - 15px);
          position:relative;
          margin-bottom: 15px;
          &:nth-child(odd){
            margin-right: 30px;
          }
          p.game-gold{
            font-size: 14px;
            font-weight: bold;
            position: absolute;
            right: 16px;
            top: 13px;
          }
          p.money-gold{
            font-size: 17px;
            color: #ff5317;
            font-weight: bold;
            position: absolute;
            right: 16px;
            bottom: 10px;
          }
        }
      }
      p.little-tips{
        font-size: 12px;
        color: #000000;
        margin-bottom: 11px;
      }
      .operate-charge{
        margin: 24px 5px 0;
        font-size: 0;
        a{
          display: inline-block;
          height: 44px;
          line-height:44px;
          width: calc((100% - 25px) / 2);
          text-align: center;
          font-size: 15px;
          border-radius: 22px;
          vertical-align: top;
          &.reject{
            color: #a5a5d5;
            background-color: #eaeaea;
            margin-right: 25px;
          }
          &.accept{
            color: #f29c0b;
             background-color: #ffdf58;
          }
        }
      }
    }
    .down-wrap{
      margin: 40px -15px 0;
      background-color: #ffdf58;
      .download-tips-content{
        margin: 0 15px;
        padding: 21px 0;
        position: relative;
        .download-btn{
          position: absolute;
          bottom: 41px;
          text-align: center;
          width: 100%;
          a.download-link{
            font-size: 15px;
            color: #f29c0b;
            text-align: center;
            display: inline-block;
            height: 44px;
            line-height: 44px;
            width: 211px;
            background-color: #ffdf58;
            border-radius: 22px;
          }
        }
      }
    }
  }
  @media screen and (max-width: 320px){
    .replace-charge .charge-main-content ul.charge-list li:nth-child(odd) {
      margin-right: 10px;
    }
    .replace-charge .charge-main-content ul.charge-list li {
      display: inline-block;
      width: calc(50% - 5px);
      position: relative;
      margin-bottom: 15px;
    }
  }
</style>
